<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { positionApi } from '@T2/service/api.ts';
import { buildTree } from '@T2/utils/utils.ts';

const props = defineProps({
  units: {
    type: Array,
    requied: true,
  }
});

const Rt = reactive({
  units: [],
})
const Filter = reactive({
  tabs: '全部',
});
watch(() => ({...Filter}), (nv, ov) => {
  let arr = props.units;
  if (nv.tabs === '达标') {
    arr = arr.filter(i => !i.warn_number);
  } else if (nv.tabs === '离线') {
    arr = [];
  } else if (nv.tabs === '报警') {
    arr = arr.filter(i => i.warn_number);
  }
  Rt.units = arr;
});

onMounted(() => {
  Rt.units = props.units;
  getPosition();
});

const options = ref([]);
const getPosition = () => {
  positionApi({
    method: 'get',
    params: {
      ordering: 'id',
    }
  }).then(res => {
    options.value = buildTree(res?.results || [], 'parent');
  });
}
const handleUnitClick = (unit) => {
  props.units.forEach(i => i._isActive = i.id === unit.id ? !i._isActive : false);
}
</script>

<template>
  <div class="container-bg flex-column">
    <div class="header-tab flex-sb">
      <button :class="{ 'isActive': Filter.tabs == '全部' }" @click="Filter.tabs = '全部'">全部</button>
      <button :class="{ 'isActive': Filter.tabs == '达标' }" @click="Filter.tabs = '达标'">达标</button>
      <button :class="{ 'isActive': Filter.tabs == '报警' }" @click="Filter.tabs = '报警'">报警</button>
      <button :class="{ 'isActive': Filter.tabs == '离线' }" @click="Filter.tabs = '离线'">离线</button>
    </div>
    <div class="list-box scroller-header">
      <template v-for="item in Rt.units">
        <div class="unit-item flex--center" :class="{ 'isActive': item._isActive }" @click="handleUnitClick(item)">
          <img :src="item.warn_number ? require('@T2/assets/maps/toilet2-warn.png') : require('@T2/assets/maps/toilet2.png')" />
          <p>{{ item.name }}</p>
          <el-icon color="rgba(255,255,255,0.65)">
            <ArrowRight v-if="!item._isActive"/>
            <ArrowDown v-else />
          </el-icon>
        </div>
        <template v-if="item._isActive && item._sensors?.length">
          <div class="grp-box flex-column" v-for="grp in (item._sensors[0].c || [])">
            {{ grp.n }}
            <div class="grid-unit" v-if="grp?.c?.length">
              <div class="sen-item flex--center" v-for="sen in grp.c">
                {{ sen.n }}：
                <strong :class="{ 'warn': !sen.state }" v-if="sen.value && sen.value !== '掉线'">
                  {{ sen.value && sen.value !== '掉线' ? sen.value : '- -' }}
                </strong>
                <span v-else>- -</span>
                &nbsp;{{ sen.unit }}
              </div>
              <div class="sen-item flex--center">
                上传时间：{{ item._sensors[0]?.c[0]?.timestamp }}
              </div>
            </div>
          </div>
        </template>
        
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container-bg {
  width: 404px;
  height: 619px;
  background: url('@T2/assets/bg/bg01.png') no-repeat center;
  background-size: 100% 100%;
  padding: 33px 16px 20px;
}
.header-tab {
  height: 30px;
  padding: 0 12px;
  button {
    background: url('@T2/assets/bg/btn-dark1.png') no-repeat center;
    background-size: 100% 100%;
    border: none;
    padding: 0;
    text-align: center;
    width: 70px;
    height: 30px;
    line-height: 30px;
    font-weight: 500;
    font-size: 16px;
    color: #14777E;
    cursor: pointer;
    &.isActive {
      color: #00FFFF;
      background: url('@T2/assets/bg/btn-light1.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
}
.list-box {
  flex: 1;
  overflow: auto;
  margin-top: 15px;
  .unit-item {
    height: 44px;
    border-radius: 4px;
    padding: 0 8px;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    &.isActive,
    &:hover {
      background-color: rgba(0,69,69,0.4);
    }
    img {
      width: 24px;
      height: 24px;
    }
    p {
      margin-left: 15px;
    }
    .el-icon {
      margin-left: auto;
    }
  }
  .grp-box {
    color: #FFFFFF;
    font-size: 14px;
    margin-top: 6px;
  }
  .grid-unit {
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
    margin-bottom: 8px;
    .sen-item {
      height: 30px;
      background: rgba(21,56,67,0.5);
      font-weight: 400;
      font-size: 12px;
      color: #D9D9D9;
      padding-left: 8px;
      strong {
        font-weight: 600;
        font-size: 14px;
        color: #00FFFF;
        &.warn {
          color: #FF0000;
        }
      }
    }
  }
}
</style>

<style scoped>

</style>